<template>
	<view class="mine_container">
		<!-- 用户信息 -->
		<view class="m_top">
			<view class="t_left">
				<!-- 图片渲染要使用 image标签 和 ：src -->
				<image :src="userImg" mode="widthFix"></image>
			</view>
			<view class="t_right">
				<view class="t_name">{{nickName}}</view>
				<view class="t_msg">{{message}}</view>
				<image :src="readMore" mode="widthFix"></image>
			</view>
		</view>

		<!-- 相关信息 -->
		<view class="m_content">
			<view class="c_item" v-for="(item, index) in rowList" :key="index">
				<!-- :src 里不要加双大括号 {{}} -->
				<image :src="item.m_imgUrl" mode="widthFix"></image>
				<view>{{item.m_word}}</view>
			</view>
		</view>

		<!-- 阅读信息 -->
		<view class="m_read">
			<!-- 书币 -->
			<view class="bookCoin">
				<view class="r_left">
					<image src="../../static/img (1).png" mode=""></image>
					<text>做任务 领书币</text>
				</view>
				<view class="r_right">
					<text>{{coin_num}}书币待领取</text>
					<image :src="readMore" mode=""></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="re_list">
				<view class="list_item" v-for="(item,index) in colList" :key="index">
					<!-- 左 -->
					<view class="i_left">
						<image :src="item.r_imgUrl" mode=""></image>
						<text>{{item.r_word}}</text>
					</view>
					<!-- 右 -->
					<view class="i_right">
						<text>{{item.r_num}}{{item.r_text}}</text>
					</view>

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userImg: '/static/user.jpg',
				nickName: '清风明月',
				message: '在知识的海洋里，我们各“书”已见。',
				readMore: '/static/r-arrow.png',
				coin_num: '200',

				// 相关信息
				rowList: [{
						m_word: '我的订单',
						m_imgUrl: '/static/order.svg'
					},
					{
						m_word: '浏览历史',
						m_imgUrl: '/static/history.svg'
					},

					{
						m_word: '我的消息',
						m_imgUrl: '/static/message.svg'
					},

					{
						m_word: '创作中心',
						m_imgUrl: '/static/write.svg'
					},

				],

				// 阅读信息
				colList: [{
						r_word: '我的书籍',
						r_imgUrl: '/static/i-book.png',
						r_num: '19',
						r_text: '本'
					},
					{
						r_word: '我的阅历',
						r_imgUrl: '/static/time.png',
						r_num: '34',
						r_text: '小时'

					},
					{
						r_word: '想读',
						r_imgUrl: '/static/read.png',
						r_num: '6',
						r_text: '本'

					},
					{
						r_word: '想法',
						r_imgUrl: '/static/idea.png',
						r_num: '302',
						r_text: '条'

					}
				],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.mine_container {
		padding: 10rpx 30rpx;
		background-color: #f6f6f6;
		height: 1200rpx;

		// 用户信息
		.m_top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			.t_left {

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.t_right {
				// 微调位置（水平，垂直）
				transform: translate(0, 10%);
				position: relative;

				.t_name {
					font-size: 36rpx;
					font-weight: bold;
				}

				.t_msg {
					color: #666;
					// 内边距： 上下 左右；
					padding: 10rpx 0;
					// 省略号处理
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// 动态计算元素的宽度
					// 运算符两侧需要有空格
					max-width: calc(100% - 10%);
				}

				image {
					width: 36rpx;
					height: 36rpx;
					// 固定定位
					position: absolute;
					top: 36rpx;
					right: 0;
				}
			}
		}

		// 相关信息
		.m_content {
			display: flex;
			justify-content: space-between;
			width: 100%;
			background-color: #fff;
			padding: 20rpx 0;
			margin: 30rpx 0;
			border-radius: 20rpx;

			.c_item {
				padding: 10rpx 20rpx;
				text-align: center;
				width: 25%;

				image {
					width: 52rpx;
					height: 52rpx;
				}
			}
		}

		// 阅读信息
		.m_read {

			// 书币
			.bookCoin {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				padding: 20rpx 30rpx;
				border-radius: 20rpx;
				background-color: #fff;

				.r_left {
					position: relative;
					// background-color: pink;
					width: 60%;

					image {
						width: 90rpx;
						height: 90rpx;
						// background-color: skyblue;
						transform: translate(-18%,0);
					}

					text {
						position: absolute;
						top: 30%;
						left: 24%;
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.r_right {
					width: calc(100% - 60%);
					position: relative;

					text {
						position: absolute;
						top: 30%;
						left: 10%;
						font-size: 30rpx;
						color: #999;
					}

					image {
						width: 36rpx;
						height: 36rpx;
						// 固定定位
						position: absolute;
						top: 36rpx;
						right: -16rpx;
					}

				}
			}

			// 列表
			.re_list {
				width: 100%;
				// background-color: pink;

				.list_item {
					background-color: #fff;
					margin-top: 20rpx;
					padding: 30rpx;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;

					.i_left {
						position: relative;
						width: 60%;

						image {
							margin-top: 20rpx;
							width: 60rpx;
							height: 60rpx;
							// background-color: skyblue;
						}

						text {
							position: absolute;
							top: 26%;
							left: 24%;
							font-size: 32rpx;
							font-weight: bold;
						}
					}

					.i_right {
						text {
							display: block;
							padding: 20rpx 0;
							// background-color: yellow;
						}
					}
				}
			}
		}
	}
</style>